<template>
  <div class="welcome-container">
    <div class="overlay">
      <h1 class="welcome-title">欢迎使用蜗牛物业管理系统</h1>
    </div>
  </div>
</template>

<style>
.welcome-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  /* 添加背景图 */
  background-image: url('https://picsum.photos/id/1067/1920/1080');
  background-size: cover; /* 让背景图覆盖整个容器 */
  background-position: center; /* 背景图居中显示 */
  background-repeat: no-repeat; /* 不重复平铺背景图 */
  position: relative; /* 为了让overlay能绝对定位 */
}

/* 添加半透明遮罩，确保文字清晰可读 */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7); /* 白色半透明遮罩 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.welcome-title {
  font-size: 3.5rem;
  text-align: center;
  color: #0f4c81;
  text-shadow: 0 3px 6px rgba(0,0,0,0.15);
  padding: 1.5rem 3rem;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.9); /* 文字背景更不透明 */
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  font-weight: 700;
  z-index: 1; /* 确保文字在遮罩上方 */
}

@media (max-width: 768px) {
  .welcome-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .welcome-title {
    font-size: 3rem;
  }
}
</style>